<template>
    <div style="background-color: #f2f2f2;">
        <div id="box"><img :src="a" alt="" id="fruit"></div>
        <div id="contentpic">
            <img :src="b" alt="">
        <img :src="c" alt="">
        </div>
        
        <div class="item" id="kajuan"><img src="../assets/bgimage3.png" alt=""></div>
        
    </div>
</template>

<script>
export default{
    data () {
        return {
            a:"",
            b:"",
            c:""
        }
    },
    mounted () {
        this.http.get("/api/kajuanpic")
        .then(res=>{
            // console.dir(res.data.msg);
            // this.$refs.firstpic.src = res.data.msg[0].img
            this.a = res.data.msg[0].img;
            this.b = res.data.msg[1].img;
            this.c = res.data.msg[2].img
        })
    }
}
</script>

<style scoped>
#kajuan {
    height: 100vh;
    
}
.item{
    
    /*height: 500px;*/
   
}
#box{
    width: 100vw;
    height: 60px;
}
#fruit{
    /*width: 100%;*/
    height: 60px;
    width: 60vw;
    margin-left: 20vw;
    text-align: center;
    
    /*height: 100px;*/
}
#kajuan img{
    /*height: 400px;*/
    width: 100%;
     margin: 0 auto;
     /*background-color: gray;*/
}
#contentpic{
    display: flex;
    justify-content: space-around;
}
#contentpic img{
    width: 25vw;
    height: 10vw;
}
</style>